iT邦幫忙

2023 iThome 鐵人賽

DAY 23
0
Modern Web

從零寫出捷運美食介紹網頁(HTML/CSS)系列 第 23

[Day23]CSS-如何與HTML連結

  • 分享至 

  • xImage
  •  

今天要介紹的是如何將CSS套用在HTML上,共有三種方式。


一、使用<link>元素

先建立好CSS檔案後,在HTML<head>中輸入<link rel="stylesheet" href="">href的屬性值為CSS檔案的絕對/相對位址。

<link rel="stylesheet" href=".\style.css">

.\style.css中的.為當前目錄。

  • 一個CSS檔案可以對到多個HTML檔案
    • 若多個網頁都要套用相同的CSS格式,只需要寫好一個CSS檔案,並載入在各個HTML檔案中。
  • 為普遍較常用的方式
    • 因為既方便後續維護,也節省空間。
  • Day19實作美食介紹網頁時我也是採用這種方式
    • 將「station_style.css」放在「Daan」資料夾底下。
      https://ithelp.ithome.com.tw/upload/images/20231005/20162303i5xNvkrWrx.png

    • 國父紀念館站、忠孝敦化站及忠孝復興站的主頁「index.html」都載入「station_style.css」。

      <link rel="stylesheet" href="..\station_style.css">
      

      ..\station_style.css中的..為上一層目錄。

二、使用<style>元素

在HTML<head>中寫入<style></style>,並將CSS寫在<style>元素的內容裡。

<style>
    table { width: 900px; }
    table, td, th, tr { border: 1px solid; }
</style>
  • 一對一的關係
    • 將CSS以<style>方式寫在HTML中,也就是說這些格式只套用在當下的HTML檔案,無法與其他網頁共用。
  • 通常只想改變特定網頁的設計時才會使用此種方式

三、使用style屬性

在元素的起始標籤中寫入style="",並將CSS寫在style的屬性值中。

<p style="font-size: 30px;">這是一個段落</p>
  • 一個style屬性對一個元素
    • 將CSS以style的屬性值寫在元素中,這些格式只套用在當下的元素,無法與其他元素共用。
  • 較費時且不易維護
    • 因為要一個元素一個元素設定,後續要進行維護是比較困難的,且很花時間。
  • 適合用在想要單獨更改某些元素的設計時使用
    • 因為這種方式套用CSS的優先順序較高,就算網頁已經用第一或第二種方式載入CSS,使用這個方式還是可以將CSS覆蓋過去。

三種將CSS載入HTML的方式就介紹到這邊。我是YQ,完賽倒數7天,明天見。


上一篇
[Day22]CSS-簡介及語法
下一篇
[Day24]CSS-建立檔案及註解
系列文
從零寫出捷運美食介紹網頁(HTML/CSS)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言